<template>
	<view class="container">

		<view style="display: none;">{{shitang_manyi_ceping_id}}</view>

		<p>
			亲爱的老师，同学们：
		</p>
		<p style=" margin-top: 3px;">
			&nbsp;&nbsp;&nbsp;&nbsp;为了进一步提高食堂伙食质量和服务水平，我们需要您的真实评价和真诚意见、建议。请您实事求是，公正地填写您的评价和意见、建议，有利于我们更好的办好食堂。
		</p>

		<template v-if="!shitang_manyi_ceping_id || redo">

			<p style=" font-weight: 700; margin: 10px 0;">
				请点击以下选项进行评价：
			</p>
			<view class="j-block">

				<view class="j-row" v-for="(item,index) in renderedList" :key="item.key"
					:style="{borderBottomColor: model[item.key] === '' ? '#e8abb1' :'#e8e8e8'}">
					<view class="j-label">{{index+1}}) {{item.label}}</view>
					<view class="j-value">
						<uni-icons custom-prefix="iconfont" type="icon-xiaolian" size="18" :style="getItemValue1Style(item.key)"
							@click="setItemValue1(item.key)"><text>满意</text></uni-icons>
						<uni-icons custom-prefix="iconfont" type="icon-kulian" size="18" :style="getItemValue2Style(item.key)"
							@click="setItemValue2(item.key)">
							<text>不满意</text></uni-icons>
					</view>
				</view>

				<view class="j-row" :style="{borderBottomColor: '#e8e8e8'}">
					<view class="j-label" style="display: flex; align-items: center; ">
						{{renderedList.length+1}}) 意见和建议
					</view>
					<view class="j-value">
						<uni-easyinput type="textarea" autoHeight v-model="model.memo" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>

				<view class="j-row"
					:style="{borderBottomColor: model['shenfen'] === '' ? '#e8abb1' :'#e8e8e8', padding:'8px 0'}">
				</view>

				<view class="j-row" :style="{borderBottomColor: model['shenfen'] === '' ? '#e8abb1' :'#e8e8e8'}">
					<view class="j-label">您的身份</view>
					<view class="j-value">
						<uni-icons custom-prefix="iconfont" type="icon-laoshi" size="18" :style="getLaoshiStyle('shenfen')"
							@click="model.shenfen = '教师'"><text>教师</text></uni-icons>
						<uni-icons custom-prefix="iconfont" type="icon-xuesheng" size="18" :style="getXueshengStyle('shenfen')"
							@click="model.shenfen = '学生'">
							<text>学生</text></uni-icons>
					</view>
				</view>

				<view class="j-row"
					:style="{borderBottomColor: model['xingming'] === '' ? '#e8abb1' :'#e8e8e8', padding:'3px 0'}"></view>

				<view class="j-row" :style="{borderBottomColor: model['xingming'] === '' ? '#e8abb1' :'#e8e8e8'}">
					<view class="j-label">您的姓名</view>
					<view class="j-value">
						<uni-icons custom-prefix="iconfont" type="icon-niming" size="18" :style="getNimingStyle('xingming')"
							@click="model.xingming = '匿名'"><text>匿名</text></uni-icons>
						<uni-icons custom-prefix="iconfont" type="icon-shiming" size="18" :style="getShimingStyle('xingming')"
							@click="showInputXingming">
							<text style="margin-left: 5px;">
								{{['匿名',''].includes( model.xingming) ? '实名' : model.xingming }}
							</text>
						</uni-icons>
					</view>
				</view>
				<view style="padding:5px 0; color: red; font-weight: 700; font-size: 18px; margin-top: 6px; text-align: center;">{{getCommitCheckMessage()}}</view>
				<view style="margin-top: 3px;">
					<button type="primary" :disabled="disableCommit()" @click="handleCommit()">提 交</button>
				</view>

				<view style="margin-top: 5px;">
					<button v-if="redo" type="default" @click="handleCancelRedo()">取 消</button>
				</view>

			</view>

		</template>

		<template v-else>
			<p style="margin-top: 30px; text-align: center; font-size: 24px; color: green;">感谢您的参与</p>
			<p style="margin-top: 15px; text-align: center; font-size: 24px; color: green;">您的满意度测评已提交</p>

			<view style="margin-top: 30px;">
				<button type="warn" @click="handleRedo()">重新提交</button>
			</view>
		</template>

		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="handleClose"
				title="输入您的姓名" @confirm="handleConfirm"></uni-popup-dialog>
		</uni-popup>

		<!-- <p style="white-space: pre-wrap;">
			{{JSON.stringify(model)}}
		</p> -->
	</view>
</template>

<script>
	
	import config from '@/jk/config.js'
	
	export default {
		data() {
			return {

				shitang_manyi_ceping_id: '', //提交后接口返回的记录id
				redo: false, //是否重新测评

				list: [{
						label: '环境卫生',
						key: 'huanjing_weisheng'
					}, {
						label: '饭菜卫生',
						key: 'fancai_weisheng'
					}, {
						label: '饭菜份量',
						key: 'fancai_fenliang'
					}, {
						label: '饭菜口味',
						key: 'fancai_kouwei'
					}, {
						label: '菜式品种',
						key: 'caishi_pinzhong'
					}, {
						label: '饭菜价格',
						key: 'fancai_jiage'
					}, {
						label: '总体评价',
						key: 'zongti_pingjia'
					},
					{
						label: '您的身份',
						key: 'shenfen',
						render: false,
						message:'请选择您的身份'
					}, {
						label: '您的姓名',
						key: 'xingming',
						render: false,
						message:'请填写您的姓名'
					},
				],

				model: {
					huanjing_weisheng: '',
					fancai_weisheng: '',
					fancai_fenliang: '',
					fancai_kouwei: '',
					caishi_pinzhong: '',
					fancai_jiage: '',
					zongti_pingjia: '',
					shenfen: '',
					xingming: '',
					memo: '',
				}
			}
		},
		mounted() {
			this.shitang_manyi_ceping_id = uni.getStorageSync('shitang_manyi_ceping_id')
		},
		computed: {
			renderedList() {
				return this.list.filter(r => r.render !== false);
			}
		},
		methods: {
			getItemValue(name) {
				return this.model[name];
			},
			getItemValue1Style(name) {
				return this.getItemValue(name) === '满意' ? {
					backgroundColor: 'green',
					color: 'white',
					borderColor: 'green',
				} : {
					backgroundColor: 'white',
					color: 'gray',
				}
			},
			getItemValue2Style(name) {
				return this.getItemValue(name) === '不满意' ? {
					backgroundColor: 'red',
					color: 'white',
					borderColor: 'red',
				} : {
					backgroundColor: 'white',
					color: 'gray',
				}
			},


			getLaoshiStyle(name) {
				return this.getItemValue(name) === '教师' ? {
					backgroundColor: '#4141f3',
					color: 'white',
					borderColor: '#4141f3',
				} : {
					backgroundColor: 'white',
					color: 'gray',
				}
			},
			getXueshengStyle(name) {
				return this.getItemValue(name) === '学生' ? {
					backgroundColor: 'brown',
					color: 'white',
					borderColor: 'brown',
				} : {
					backgroundColor: 'white',
					color: 'gray',
				}
			},

			getNimingStyle(name) {
				return this.getItemValue(name) === '匿名' ? {
					backgroundColor: '#4141f3',
					color: 'white',
					borderColor: '#4141f3',
				} : {
					backgroundColor: 'white',
					color: 'gray',
				}
			},

			getShimingStyle(name) {
				return this.getItemValue(name) !== '匿名' && this.getItemValue(name).trim() !== '' ? {
					backgroundColor: 'brown',
					color: 'white',
					borderColor: 'brown',
				} : {
					backgroundColor: 'white',
					color: 'gray',
				}
			},

			setItemValue1(name) {
				console.log(1, name)
				this.model[name] = '满意'
			},
			setItemValue2(name) {
				console.log(2, name)
				this.model[name] = '不满意'
			},

			showInputXingming() {
				this.model.xingming = '';
				this.$refs.popup.open()
			},

			handleClose() {
				this.$refs.popup.close();
			},
			handleConfirm(value) {
				// 输入框的值
				console.log(value)
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				if (value.trim().length === 0) {
					uni.showModal({
						title: '输入错误',
						content: '请输入姓名，最多3个字符',
						showCancel: false,
					})
				} else if (value.length > 3) {
					uni.showModal({
						title: '输入错误',
						content: '姓名最多3个字符',
						showCancel: false,
					})
				} else {
					this.model.xingming = value;
					this.$refs.popup.close()
				}
			},
			disableCommit() {
				const rlt = Object.keys(this.model).some(k => {
					const value = this.model[k];
					console.log(value)
					return (value || '').trim() === '' && k !== 'memo';
				})
				console.log({
					rlt
				})
				return rlt;
			},

			getCommitCheckMessage() {
				const t = this;
				const found = this.list.find(r => t.model[r.key] === '');
				if (found) {
					return found.message || `请完成${found.label}的评价`;
				} else {
					return;
				}
			},

			handleRedo() {

				this.model = {
					huanjing_weisheng: '',
					fancai_weisheng: '',
					fancai_fenliang: '',
					fancai_kouwei: '',
					caishi_pinzhong: '',
					fancai_jiage: '',
					zongti_pingjia: '',
					shenfen: '',
					xingming: '',
					memo: '',
				}

				this.redo = true;
			},

			handleCancelRedo() {
				this.redo = false;
			},

			handleCommit() {
				const t = this;
				const data = this.model;

				const id = this.shitang_manyi_ceping_id || '';

				uni.showModal({
					title: '请确认',
					content: '您确认现在提交吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');

							uni.showLoading({
								title: '正在提交'
							})

							uni.request({
								method: 'POST',
								url: `${config.rootUrl}/wuxixz/shitang_manyi_ceping/commit`, //仅为示例，并非真实接口地址。
								data: {
									id,
									...data
								},
								header: {},
								success: (res) => {
									res = res.data;

									console.log(44, res)

									if (res.code === 0) {

										t.redo = false;
										t.shitang_manyi_ceping_id = res.result;

										uni.setStorageSync("shitang_manyi_ceping_id", res.result);

										// uni.showModal({
										// 	title: '信息',
										// 	content: '提交成功',
										// 	showCancel: false,
										// })
									} else {
										uni.showModal({
											title: '错误',
											content: `提交失败：${res.message}`,
											showCancel: false,
										})
									}

								},
								fail: (err) => {
									console.log(err);
									uni.showModal({
										title: '错误',
										content: `提交失败：${err.message}`,
										showCancel: false,
									})
								},
								complete() {
									uni.hideLoading();
								}
							});

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		}
	}
</script>

<style>
	p {
		/* font-family: "KaiTi", "楷体", serif; */
		font-size: 18px;
		font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
		font-size: 16px;
	}

	.container {
		box-sizing: border-box;
		max-width: 400px;
		padding: 10px 20px 20px;
		font-size: 14px;
		line-height: 24px;

	}

	.uni-icons {
		border: 1px solid #e8e8e8;
		padding: 3px 8px;
		border-radius: 3px;
		min-width: 80px;
	}

	.uni-icons text {
		/* font-family: "KaiTi", "楷体", serif;		 */
		font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
		margin-left: 5px;
		font-size: 15px;
	}

	.j-block {
		margin-top: 5px;
	}

	.j-row {
		/* padding: 5px 0; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #e8e8e8;
	}

	.j-row:first-child {
		border-top: 1px solid #e8e8e8;
	}

	.j-label {
		font-weight: 700;
		color: black;
		padding: 5px 0 5px 3px;

		font-size: 17px;
		width: 35%;
		white-space: nowrap;
		/* font-family: "KaiTi", "楷体", serif; */
		font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
	}

	.j-label::after {
		content: '：';
	}

	.j-value {
		width: 65%;
		padding: 5px 0;
		font-size: 22px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>